body{
          background-image: url("/Pictures/pool.jpg");
          background-size: 100vw 100vh;
          display: flex;
          justify-content: center;
        }
        
/* every container */

        #fullpageflex{
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          width: 1980px;
          height: 925px;
        }
        
        #backgroundcontainer{
          display: flex;
          flex-wrap: wrap;
          align-self: center;
          width: 900px;
          height: 780px;
        }
        
        #elementcontainer{
          display: flex;
          align-self: center;
          margin-left: -901px;
          width: 900px;
          height: 780px;
        }
        
        #topcontainer{
          display: flex;
          width: 900px;
          height: 190px;
          gap: 10px;
        }
        
        #bottomcontainer{
          display: flex;
          width: 900px;
          height: 585px;
        }

/* first row */

        .musiccontainer{
          display: flex;
          width: 280px;
          height: 180px;
        }
        
        .headercontainer{
          display: flex;
          width: 610px;
          height: 180px;
        }
        
        .maincontainer{
          display: flex;
          width: 900px;
          height: 585px;
        }
        
        .music{
          display: flex;
          align-items: center;
          column-gap: 20px;
          border: 1px solid grey;
          background: url("/Pictures/sweater1.jpg");
          background-size: cover;
        }
        
        .disc{
          border-radius: 60px; 
          border: 1px solid grey; 
          width: 100px; 
          min-width: 100px;
          height: 100px;
          min-height: 100px;
          background-image: url(https://balka-book.com/files/2024/01_03/21_21/u_files_store_21_131.jpg); 
          background-size: contain;
          margin-left: 7px;
        }
        
        .musicplayer{
          border: 1px solid black; 
          width: 112px; 
          height: 90%; 
          font-family: Life Is Strange; 
          background: url("/Pictures/tna.jpg"); 
          background-size: cover; 
          filter: grayscale(1);
        }
        
        .musicplayer:hover{
          filter: grayscale(0); transition: 0.5s
        }
        
        .header:not(.win7){
          border: 1px solid grey;
          padding-right: 10px;
          align-content:flex-end;
          text-align: right;
          font-size: 30px;
          font-family: damsterdam;
          color: #f5e7b8;
          background: url("/Pictures/treesky.jpg");
          height: 150px;
          background-size: cover;
          background-position: center;
        }
        
/* second row */

        main{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 0px;
          height: inherit;
        }
        
        
        .nav{
          height: 53px;
          width: 220px;
          background: url("/Pictures/fishspin.gif");
          background-size: 220px 53px;
          border: 1px solid black;
        }

        .naveasteregg{
          background: url("/Pictures/explosion.gif");
          background-position: center;
          height: 53px;
          width: 220px;
          opacity: 0;
        }

        .naveasteregg:hover{
          opacity: 1;
        }
        
        .links:not(.win7){
          background: url("/Pictures/Buildings/build2.jpg");
          background-size: cover;
          background-position: bottom;
          height: 53px;
          display: flex;
          align-items: center;
          align-self: flex-start;
          margin-left: auto;
          flex-grow: 2;
          text-align: right;
          justify-content: flex-end;
          border: 1px solid black;
          border-bottom: 0px solid grey;
          border-left: 0px;
          border-top-right-radius: 15px;
          font-family: damsterdam;
          font-size: 25px;
        }
        
        .linkbutton:not(.win7){
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          border-radius: 5px;
          position: relative;
          margin: 5px;
          margin-right: 10px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 15px; 
          color: #d52d00;
        }
        
        .linkbutton:hover:not(.win7){
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          box-shadow: none;
          font-style: italic;
          border: 1px solid #9de3ff;
          text-decoration: none;
          color: #ef7627;
          margin-bottom: 3px;
        }

        .linkcontent1{
          display: none;
          position: absolute;
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
          margin-top: 3px;
          margin-left: 5px;
          border-radius: 5px;
        }

        .linkcontent1 a{
          padding-bottom: 5px;
          color: #d162a4;
          border-radius: 5px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 10px;
        }

        .linkcontent1 a:hover{
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          border: 1px solid #9de3ff;
          box-shadow: none;
          font-style: italic;
          text-decoration: none;
          color: #a30262;
        }

        .linkdropdown1:hover .linkcontent1{
          display: flex;
          flex-direction: column;
        }

        .linkcontent2{
          display: none;
          position: absolute;
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
          margin-top: 3px;
          margin-left: 5px;
          border-radius: 5px;
        }

        .linkcontent2 a{
          padding-bottom: 5px;
          color: #d162a4;
          border-radius: 5px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 10px;
        }

        .linkcontent2 a:hover{
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          border: 1px solid #9de3ff;
          box-shadow: none;
          font-style: italic;
          text-decoration: none;
          color: #a30262;
        }

        .linkdropdown2:hover .linkcontent2{
          display: flex;
          flex-direction: column;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
        }

        .linkcontent3{
          display: none;
          position: absolute;
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
          margin-top: 3px;
          margin-left: 5px;
          border-radius: 5px;
        }

        .linkcontent3 a{
          padding-bottom: 5px;
          color: #d162a4;
          border-radius: 5px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 10px;
        }

        .linkcontent3 a:hover{
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          border: 1px solid #9de3ff;
          box-shadow: none;
          font-style: italic;
          text-decoration: none;
          color: #a30262;
        }

        .linkdropdown3:hover .linkcontent3{
          display: flex;
          flex-direction: column;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
        }

        .linkcontent4{
          display: none;
          position: absolute;
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
          margin-top: 3px;
          margin-left: 5px;
          border-radius: 5px;
        }

        .linkcontent4 a{
          padding-bottom: 5px;
          color: #d162a4;
          border-radius: 5px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 10px;
        }

        .linkcontent4 a:hover{
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          border: 1px solid #9de3ff;
          box-shadow: none;
          font-style: italic;
          text-decoration: none;
          color: #a30262;
        }

        .linkdropdown4:hover .linkcontent4{
          display: flex;
          flex-direction: column;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
        }

        .linkcontent5{
          display: none;
          position: absolute;
          background: linear-gradient(to bottom,  #ffffff 0%, #f5f3ed 48%, #f3f3f3 49%,#e0e0e0 50%,#dadada 100%);
          border: 1px solid #d6d6d6;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
          margin-top: 3px;
          margin-left: 5px;
          border-radius: 5px;
        }

        .linkcontent5 a{
          padding-bottom: 5px;
          color: #d162a4;
          border-radius: 5px;
          text-align: left;
          text-decoration: none;
          padding: 2px 5px 2px 10px;
        }

        .linkcontent5 a:hover{
          background: linear-gradient(to bottom,  #ffffff 0%, #bcefff 49%,#ace7ff 50%,#94e5fd 100%);
          border: 1px solid #9de3ff;
          box-shadow: none;
          font-style: italic;
          text-decoration: none;
          color: #a30262;
        }

        .linkdropdown5:hover .linkcontent5{
          display: flex;
          flex-direction: column;
          box-shadow: 3px 3px 3px rgba(66, 66, 66, 0.479);
        }

        .sidebar{
          background: url("/Pictures/palustre.jpg");
          background-size: cover;
          background-position: left;
          height: 440px;
          width: 179px;
          border: 1px solid black;
          border-left: 0px;
          margin-top: -1px;
          padding: 20px;
          flex: 1 20px;
        }
        
        .sidebarbox{
          align-self: center;
          border-radius: 15px;
          background: #f5f3ed;
          border: 1px solid black;
          padding: 10px;
          width: 158px;
          height: 185px;
          overflow: auto;
          margin-top: 10px;
        }

        .circle{
          margin-left: 9px;
          border: 1px solid black; 
          border-radius: 100px;
          height: 160px; 
          width: 160px;
          margin-bottom: 10px; 
          background-size: cover;
          background-position: center;
          box-shadow: 2px 2px;
          overflow: hidden;
        }

        .circle img{
          width: 100%;
          height: 100%;
          object-fit: contain;
          background: white;
        }
        
        .gifselect{
          padding: 10px;
          font-family: Max Diary;
        }
        
        .middlecontent{
          background: url("/Pictures/waves.jpg");
          background-size: cover;
          height: 460px;
          max-height: 460px;
          width: 630px;
          border: 1px solid black;
          font-size: 16px;
          font-family: Max Diary;
          padding: 10px;
          margin-top: -1px;
          border-bottom-left-radius: 15px;
        }
        
        .textbox{
          border-radius: 15px;
          background: #f5f3ed;
          border: 1px solid black;
          padding: 10px;
          width: 610px;
          height: 440px;
          overflow: auto;
        }
        
/* customization */
        
        .rotate {
          animation: rotation 10s infinite linear;
        }
                
        @keyframes rotation {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(359deg);
          }
        }


/* test
         .walkingcatgif{
          position: absolute;
          animation: move 5s linear infinite;
        }
        
        @keyframes move
        {
            from {
                left: 0;
            }
            to {
                left: 60%;
            }
        }  
*/

/* fonts */
        @font-face {
          font-family: Sean Diary;
          src : url("/Fonts/Keveat Sandaalit Bold.otf")
        }
        @font-face {
          font-family: Life Is Strange;
          src : url("/Fonts/Whatnot Regular.ttf")
        }
        @font-face {
          font-family: Max Diary;
          src : url("/Fonts/Dudu\ Calligraphy.ttf")
        }
        @font-face {
          font-family: Club Penguin;
          src: url("/Fonts/Club\ Penguin.ttf");
        }
        @font-face {
          font-family: club;
          src: url("/Fonts/BumbastikaImproved.otf");
        }
        @font-face {
          font-family: artpostblack;
          src: url("/Fonts/Art Post black.ttf");
        }
        @font-face {
          font-family: artpost;
          src: url("/Fonts/Art Post.ttf");
        }
        @font-face {
          font-family: berky;
          src: url("/Fonts/BERKY.ttf");
        }
        @font-face {
          font-family: bespoke;
          src: url("/Fonts/Bespoke.otf");
        }
        @font-face {
          font-family: damsterdam;
          src: url("/Fonts/Damsterdam.ttf");
        }
        @font-face {
          font-family: deliciouswould;
          src: url("/Fonts/DeliciousWould.ttf");
        }
        @font-face {
          font-family: fettecke;
          src: url("/Fonts/Fettecke.ttf");
        }
        @font-face {
          font-family: glass;
          src: url("/Fonts/Glass.ttf");
        }
        @font-face {
          font-family: linographer;
          src: url("/Fonts/Linographer.ttf");
        }
        @font-face {
          font-family: polish;
          src: url("/Fonts/Polish Posterisation.ttf");
        }
        @font-face {
          font-family: swirl;
          src: url("/Fonts/SwirlInsertion.ttf");
        }

        @font-face {
          font-family: improbable;
          src: url("/Fonts/Improbable.ttf");
        }

        @font-face {
          font-family: dave;
          src: url("/Fonts/Dave Gridder.ttf");
        }

        @font-face {
          font-family: greek;
          src: url("/Fonts/GreekTragedy.ttf");
        }

        @font-face {
          font-family: pursue;
          src: url("/Fonts/Pursue.ttf");
        }